<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button onclick="saveData()">点我保存数据到 localStorage 中</button>
    <button onclick="getData()">点我读取 localStorage 中 的数据</button>
    <button onclick="romoveData()">点我删除 localStorage 中 的数据</button>
    <button onclick="removeAllData()">点我删除 localStorage 中 的所有数据</button>
  </div>
  <script type="text/javascript">
    // localStorage 特点是，保存的数据关闭浏览器不会丢失
    function saveData(){
      // 向浏览器本地存储中存入一个数据
      // 键和值都只能是字符串
      window.localStorage.setItem('k1','v1');
      // 存入一个对象
      const p = {
        name: '王五',
        age: 18
      }
      window.localStorage.setItem('p', JSON.stringify(p));
    };

    function getData(){
      // 如果没有要取的数据，返回 null; JSON.parse(null)也是返回null
      console.log('k1:',window.localStorage.getItem('k1'))
      console.log('p:',window.localStorage.getItem('p'))
      const p = JSON.parse(window.localStorage.getItem('p'))
    };

    function romoveData() {
      window.localStorage.removeItem('k1');
      // window.localStorage.removeItem('p');
    };

    function removeAllData() {
      window.localStorage.clear();
    };

  </script>
</body>
</html>